<template>
  <div class="exam-take">
    <div class="exam-header">
      <h2>学生考试</h2>
    </div>

    <el-table :data="examData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="title" label="试卷标题"></el-table-column>
      <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
      <el-table-column label="试题数量" width="120">
        <template #default="{ row }">
          {{ row.questionIds?.length || 0 }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          {{ getExamStatus(row.id) }}
        </template>
      </el-table-column>
      <el-table-column label="分数" width="100">
        <template #default="{ row }">
          {{ getSubmissionScore(row.id) || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="startExam(row.id)"
            :disabled="hasSubmitted(row.id)"
            :icon="Edit"
          >考试</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Edit } from '@element-plus/icons-vue';
import { usePaperStore } from '@/stores/api/paper';
import { usePaperSubmissionStore } from '@/stores/api/paper-submission';
import { useUserStore } from '@/stores/api/user';
import { ElMessage } from 'element-plus';

const paperStore = usePaperStore();
const paperSubmissionStore = usePaperSubmissionStore();
const userStore = useUserStore();
const router = useRouter();

const statusMap = {
  PUBLISHED: '已发布',
  SUBMITTED: '已提交',
  GRADED: '已评分',
};

const examData = ref([]);
const submissions = ref([]);

const getSubmissionScore = (paperId: number) => {
  const submission = submissions.value.find((s: any) => s.paperId === paperId);
  return submission && submission.status === 'GRADED' ? submission.score : null;
};

const hasSubmitted = (paperId: number) => {
  return submissions.value.some((s: any) => s.paperId === paperId);
};

const getExamStatus = (paperId: number) => {
  const submission = submissions.value.find((s: any) => s.paperId === paperId);
  if (submission) {
    return statusMap[submission.status] || submission.status;
  }
  const paper = examData.value.find((p: any) => p.id === paperId);
  return paper ? statusMap[paper.status] || paper.status : '未知';
};

const fetchExams = async () => {
  try {
    const papers = await paperStore.fetchPapersByStatus('PUBLISHED');
    examData.value = papers;
  } catch (error) {
    ElMessage.error('获取试卷列表失败');
  }
};

const fetchSubmissions = async () => {
  if (!userStore.user?.id) return;
  try {
    const response = await paperSubmissionStore.fetchSubmissionsByStudent(userStore.user.id);
    submissions.value = response;
  } catch (error) {
    ElMessage.error('获取提交记录失败');
  }
};

const startExam = (paperId: number) => {
  router.push(`/front/exam/${paperId}`);
};

onMounted(() => {
  fetchExams();
  fetchSubmissions();
});
</script>

<style scoped>
.exam-take {
  width: 80%;
  margin: 40px auto 0 auto;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.exam-header h2 {
  font-size: 24px;
  color: #333;
  flex-grow: 1;
  text-align: center;
}

.exam-take .el-table {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>